<!--
 * @Author: your name
 * @Date: 2020-11-24 14:55:24
 * @LastEditTime: 2021-01-14 14:55:59
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solax-design\src\views\adminInverter\createInverter.vue
-->
<template>
    <div>
        <el-divider content-position="left"><span style="font-size:18px;font-weight: 700;">{{$t('project.inv.edit')}}</span></el-divider>
        <el-form ref="form" :model="form" label-width="380px" label-position='left'>
            <el-row :gutter="20">
                <el-col :span="20" :offset="1">
                    <el-divider content-position="left">{{$t('project.regular-data')}}</el-divider>
                </el-col>
                <el-col :span="10" :offset="1">
                    <el-form-item :label="$t('project.data.inv-type')" prop="name" :rules="[{ required: true, message: $t('remind.not-null')}]">
                        <el-input v-model="form.name" :placeholder="$t('common.info.pl-insert-content')"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10" :offset="1">
                    <el-form-item :label="$t('project.inv.work-tem-min')" prop="tempSurroundingFrom" :rules="[{ required: true, message: $t('remind.not-null')}]">
                        <el-input type="number" v-model="form.tempSurroundingFrom" :placeholder="$t('common.info.pl-insert-content')"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10" :offset="1">
                    <el-form-item  :label="$t('project.inv.work-tem-max')" prop="tempSurroundingTo" :rules="[{ required: true, message: $t('remind.not-null')}]">
                        <el-input type="number" v-model="form.tempSurroundingTo" :placeholder="$t('common.info.pl-insert-content')"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10" :offset="1">
                    <el-form-item :label="$t('project.protection-class')" prop="protection" :rules="[{ required: true, message: $t('remind.not-null')}]">
                        <el-input v-model="form.protection" :placeholder="$t('common.info.pl-insert-content')"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10" :offset="1">
                    <el-form-item :label="$t('new.PV.management.width') + '(mm)'" prop="width" :rules="[{ required: true, message: $t('remind.not-null')}]">
                        <el-input type="number"  v-model="form.width" :placeholder="$t('common.info.pl-insert-content')"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10" :offset="1">
                    <el-form-item  :label="$t('project.height') + '(mm)'" prop="height" :rules="[{ required: true, message: $t('remind.not-null')}]">
                        <el-input type="number" v-model="form.height" :placeholder="$t('common.info.pl-insert-content')"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10" :offset="1">
                    <el-form-item  :label="$t('project.depth') + '(mm)'" prop="depth" :rules="[{ required: true, message: $t('remind.not-null')}]">
                        <el-input  type="number" v-model="form.depth" :placeholder="$t('common.info.pl-insert-content')"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10" :offset="1">
                    <el-form-item :label="$t('new.PV.management.weight') + '(kg)'" prop="weight" :rules="[{ required: true, message: $t('remind.not-null')}]">
                        <el-input type="number" v-model="form.weight" :placeholder="$t('common.info.pl-insert-content')"></el-input>
                    </el-form-item>
                </el-col>
                
                <el-col :span="10" :offset="1">
                    <el-form-item :label="$t('project.inv.cross-section-max-dc')" prop="crossSectionMaxDC" :rules="[{ required: false, message: $t('remind.not-null')}]">
                        <el-input type="number" v-model="form.crossSectionMaxDC" :placeholder="$t('common.info.pl-insert-content')"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10" :offset="1">
                    <el-form-item :label="$t('project.inv.cross-section-min-ac')" prop="crossSectionMinAC" :rules="[{ required: false, message: $t('remind.not-null')}]">
                        <el-input type="number" v-model="form.crossSectionMinAC" :placeholder="$t('common.info.pl-insert-content')"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10" :offset="1">
                    <el-form-item :label="$t('project.inv.cross-section-max-ac')" prop="crossSectionMaxAC" :rules="[{ required: false, message: $t('remind.not-null')}]">
                        <el-input type="number" v-model="form.crossSectionMaxAC" :placeholder="$t('common.info.pl-insert-content')"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10" :offset="1">
                    <el-form-item :label="$t('project.inv.u-inv-recommended')" prop="uInvRecommended" :rules="[{ required: false, message: $t('remind.not-null')}]">
                        <el-input type="number" v-model="form.uInvRecommended" :placeholder="$t('common.info.pl-insert-content')"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10" :offset="1">
                    <el-form-item :label="$t('project.inv.p-inv-recommended')" prop="pInvRecommended" >
                        <el-input type="number" v-model="form.pInvRecommended" :placeholder="$t('common.info.pl-insert-content')"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10" :offset="1">
                    <el-form-item :label="$t('project.inv.p-inv-cons')" prop="pInvCons" :rules="[{ required: false, message: $t('remind.not-null')}]">
                        <el-input  type="number" v-model="form.pInvCons" :placeholder="$t('common.info.pl-insert-content')"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10" :offset="1">
                    <el-form-item :label="$t('project.inv.is-utilizing-reac-power')" prop="isUtilizingReacPower" :rules="[{ required: true, message: $t('remind.not-null')}]">
                        <el-checkbox v-model="form.isUtilizingReacPower"></el-checkbox>
                    </el-form-item>
                </el-col>
                <el-col :span="10" :offset="1">
                    <el-form-item :label="$t('project.inv.is-tri-phase')" prop="isTriPhase" :rules="[{ required: true, message: $t('remind.not-null')}]">
                        <el-checkbox v-model="form.isTriPhase"></el-checkbox>
                    </el-form-item>
                </el-col>
                <el-col :span="20" :offset="1">
                    <el-divider content-position="left">{{$t('project.inv.conversion-efficiency')}}</el-divider>
                </el-col>
                <el-col :span="10" :offset="1">
                    <el-form-item :label="$t('project.max-efficiency') + '(%)'" prop="etaInvMax" :rules="[{ required: true, message: $t('remind.not-null')}]">
                        <el-input type="number" v-model="form.etaInvMax" :placeholder="$t('common.info.pl-insert-content')"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10" :offset="1">
                    <el-form-item :label="$t('project.european-efficiency') + '(%)'" prop="etaInvEuropean" :rules="[{ required: true, message: $t('remind.not-null')}]">
                        <el-input type="number" v-model="form.etaInvEuropean" :placeholder="$t('common.info.pl-insert-content')"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10" :offset="1">
                    <el-form-item :label="$t('project.inv.eta-inv-nominal') + '(%)'" prop="etaInvNominal" :rules="[{ required: true, message: $t('remind.not-null')}]">
                        <el-input type="number" v-model="form.etaInvNominal" :placeholder="$t('common.info.pl-insert-content')"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10" :offset="1">
                    <el-form-item :label="$t('project.inv.pic')" prop="uploadFile" :rules="[{ required: false, message: $t('remind.not-null')}]">
                        <baseFile v-model='form.uploadFile' @change='returnImgUrl' :name='form.pictureUrl || ""'></baseFile>
                    </el-form-item>
                    <img :src="imgBaseUrl" alt="" width="150px">
                </el-col>
                <el-col :span="20" :offset="1">
                    <el-divider content-position="left">{{$t('project.input-data')}}</el-divider>
                </el-col>
                <el-col :span="10" :offset="1">
                    <el-form-item :label="$t('new.PV.management.Max.DC-power') + '(W)'" prop="pInvDCmax" :rules="[{ required: true, message: $t('remind.not-null')}]">
                        <el-input type="number" v-model="form.pInvDCmax" :placeholder="$t('common.info.pl-insert-content')"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10" :offset="1">
                    <el-form-item :label="$t('new.PV.management.Max.DC-voltage') + '(V)'" prop="uInvDCmax" :rules="[{ required: true, message: $t('remind.not-null')}]">
                        <el-input type="number" v-model="form.uInvDCmax" :placeholder="$t('common.info.pl-insert-content')"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10" :offset="1">
                    <el-form-item :label="$t('project.DC-rated-voltage') + '(V)'" prop="uInvDCnom" :rules="[{ required: true, message: $t('remind.not-null')}]">
                        <el-input type="number" v-model="form.uInvDCnom" :placeholder="$t('common.info.pl-insert-content')"></el-input>
                    </el-form-item>
                </el-col>
                <!-- <el-col :span="10" :offset="1">
                    <el-form-item :label="$t('project.inv.strings-number')" prop="stringsNumber" :rules="[{ required: true, message: $t('remind.not-null')}]">
                        <el-input-number v-model="form.stringsNumber" controls-position="right" @change="numberChange" :min="1" :max="10"></el-input-number>
                    </el-form-item>
                </el-col> -->
                <el-col :span="10" :offset="1">
                    <el-form-item :label="$t('project.inv.MPPT-count')" prop="inputCount" :rules="[{ required: true, message: $t('remind.not-null')}]">
                        <el-input type="number" v-model="form.inputCount" :placeholder="$t('common.info.pl-insert-content')" @change="numberChange"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
                <template v-for='(item,index) in parseInt(form.inputCount)'>
                        <el-row :gutter="20" :key="index+1" style="background-color:#f6f6f6;margin-top:5px;padding-top:5px;">
                            <el-col :span="10" :offset="1" :key="index+1">
                                <el-form-item :label="returnProNumber(index+1,$t('project.inv.strings-parallel-count'))" :prop="'iInvDCObject.stringsParallelCount'+(index+1)" :rules="[{ required: true, message: $t('remind.not-null')}]">
                                    <el-input type="number" v-model="form.iInvDCObject[`stringsParallelCount${index+1}`]" :placeholder="$t('common.info.pl-insert-content')"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="10" :offset="1" :key="(index+1)*10">
                                <el-form-item :label="returnProNumber(index+1 , $t('project.inv.i-inv-dc-max'))" :prop="'iInvDCObject.iInvDCMax'+(index+1)" :rules="[{ required: true, message: $t('remind.not-null')}]">
                                    <el-input type="number" v-model="form.iInvDCObject[`iInvDCMax${index+1}`]" :placeholder="$t('common.info.pl-insert-content')"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="10" :offset="1" :key="(index+1)*100">
                                <el-form-item :label="returnProNumber(index+1 , $t('project.inv.i-inv-sc-max'))" :prop="'iInvDCObject.iInvSCMax'+(index+1)" :rules="[{ required: true, message: $t('remind.not-null')}]">
                                    <el-input type="number" v-model="form.iInvDCObject[`iInvSCMax${index+1}`]" :placeholder="$t('common.info.pl-insert-content')"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="10" :offset="1" :key="(index+1)*1000">
                                <el-form-item :label="returnProNumber(index+1 , $t('project.inv.pwmax') )" :prop="'iInvDCObject.iInvPWMax'+(index+1)" :rules="[{ required: true, message: $t('remind.not-null')}]">
                                    <el-input type="number" v-model="form.iInvDCObject[`iInvPWMax${index+1}`]" :placeholder="$t('common.info.pl-insert-content')"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                </template>
                <el-row :gutter="20">
                <el-col :span="10" :offset="1">
                    <el-form-item :label="$t('project.inv.u-inv-MPP-max')" prop="uInvMPPmax" :rules="[{ required: true, message: $t('remind.not-null')}]">
                        <el-input type="number" v-model="form.uInvMPPmax" :placeholder="$t('common.info.pl-insert-content')"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10" :offset="1">
                    <el-form-item :label="$t('project.inv.u-inv-MPP-min-from')" prop="uInvMPPminTo" :rules="[{ required: true, message: $t('remind.not-null')}]">
                        <el-input  type="number" style="width:45%;" v-model="form.uInvMPPminFrom" placeholder="最小值"></el-input>
                         - 
                        <el-input type="number" style="width:45%;" v-model="form.uInvMPPminTo" placeholder="最大值"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10" :offset="1">
                    <el-form-item :label="$t('project.inv.u-inv-PV-xi')" prop="uInvPVmin" :rules="[{ required: true, message: $t('remind.not-null')}]">
                        <el-input type="number" style="width:45%;" v-model="form.uInvPVmin" placeholder="最小值"></el-input>
                         - 
                        <el-input type="number" style="width:45%;" v-model="form.uInvPVmax" placeholder="最大值"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="20" :offset="1">
                    <el-divider content-position="left">{{$t('project.output-data')}}</el-divider>
                </el-col>
                <el-col :span="10" :offset="1">
                    <el-form-item :label="$t('project.Max.AC-power') + '(W)'" prop="pInvACmax" :rules="[{ required: true, message: $t('remind.not-null')}]">
                        <el-input type="number" v-model="form.pInvACmax" :placeholder="$t('common.info.pl-insert-content')"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10" :offset="1">
                    <el-form-item :label="$t('project.data.nominal-AC-power') + '(W)'" prop="pInvACnom" :rules="[{ required: true, message: $t('remind.not-null')}]">
                        <el-input type="number" v-model="form.pInvACnom" :placeholder="$t('common.info.pl-insert-content')"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10" :offset="1">
                    <el-form-item :label="$t('inverter.info.min.power')" prop="powerFactorMin" :rules="[{ required: false, message: $t('remind.not-null')}]">
                        <el-input type="number" v-model="form.powerFactorMin" :placeholder="$t('common.info.pl-insert-content')"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10" :offset="1">
                    <el-form-item :label="$t('project.inv.u-inv-AC-from')" prop="uInvACFrom" :rules="[{ required: true, message: $t('remind.not-null')}]">
                        <el-input type="number" style="width:45%;" v-model="form.uInvACFrom" :placeholder="$t('common.info.min')"></el-input>
                         - 
                        <el-input type="number" style="width:45%;" v-model="form.uInvACTo" :placeholder="$t('common.info.max')"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10" :offset="1">
                    <el-form-item :label="$t('project.grid-frequency') + '(Hz)'" prop="gridFrequFrom" :rules="[{ required: true, message: $t('remind.not-null')}]">
                        <el-input type="number" style="width:45%;" v-model="form.gridFrequFrom" :placeholder="$t('common.info.min')" ></el-input>
                         - 
                        <el-input type="number" style="width:45%;" v-model="form.gridFrequTo" :placeholder="$t('common.info.max')" ></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div class="save-main-box">
            <el-button type="primary" @click="save('form')">{{$t('userInfo.alter')}}</el-button>
            <el-button type="primary" @click="()=>{$router.push({path:'/adminInverter'})}">{{$t('uerInfo.back')}}</el-button>
        </div>
    </div>
</template>

<script>
import baseFile from '../../components/common/baseFileInput'
export default {
    components: {
        baseFile
    },
    props: {

    },
    data() {
        return {
            form:{
                snCount:'',
                name:'',
                tempSurroundingFrom:'',
                tempSurroundingTo:'',
                protection:'',
                width:'',
                height:'',
                depth:'',
                weight:'',
                inputCount:'',
                crossSectionMaxDC:'',
                crossSectionMinAC:'',
                crossSectionMaxAC:'',
                uInvRecommended:'',
                pInvRecommended:'',
                etaInvMax:'',
                etaInvEuropean:'',
                etaInvNominal:'',
                checked:false,
                isTriPhase:false,
                isUtilizingReacPower:false,
                uploadFile:'',
                pInvDCmax:'',
                uInvDcmax:'',
                uInvDcnom:'',
                uInvMPPmax:'',
                stringsNumber:1,
                uInvMPPminFrom:'',
                uInvMPPminTo:'',
                uInvPVmin:'',
                uInvPVmax:'',
                pInvACmax:'',
                pInvACnom:'',
                powerFactorMin:'',
                uInvACFrom:'',
                uInvACTo:'',
                gridFrequFrom:'',
                gridFrequTo:'',
                iInvDCObject:{
                    iInvDCMax1:'',
                    iInvSCMax1:'',
                    stringsParallelCount1:'',
                    iInvPWMax:'',
                },
            },
            imgBaseUrl:''
        };
    },
    computed: {

    },
    watch: {

    },
    created() {

    },
    mounted() {
        this.systemTinverterGetById()
    },
    methods: {
        returnProNumber(number,text){
            let lan = localStorage.getItem('lan')
            if(lan == 'zh_CN'){
                return number +' '+ text
            }else if(lan == 'en_US'){
                return text +' '+ number
            }
        },
        async systemTinverterGetById(){
            let res = await this.API.systemTinverterGetById({
                name:this.$route.query.name,
                invID:this.$route.query.id,
            })
            this.form = res
            this.form.uploadFile = ''
            this.$set(this.form,'iInvDCObject',{})
            for(let i=0;i<res.inputCount;i++){
                this.$set(this.form.iInvDCObject,`iInvDCMax${i+1}`,res[`iInvDCMax${i+1}`] || '')
                this.$set(this.form.iInvDCObject,`iInvSCMax${i+1}`,res[`iInvSCMax${i+1}`] || '')
                this.$set(this.form.iInvDCObject,`stringsParallelCount${i+1}`,res[`stringsParallelCount${i+1}`] || '')

                this.$set(this.form.iInvDCObject,`iInvPWMax${i+1}`,res[`iInvPWMax${i+1}`] || '')
            }
            this.systemTuserGetLogo(res.pictureUrl)
        },
        async systemTuserGetLogo(url){
            let res = await this.API.systemTuserGetLogo({
                fileName:url
            })
            if(res){
                this.imgBaseUrl ='data:image/gif;base64,' + res
            }
        },
        numberChange(){
            if(this.form.inputCount>10){
                this.form.inputCount = 10
            }else if(this.form.inputCount <1){
                this.form.inputCount = 1
            }
            for(let i = 0;i<this.form.inputCount;i++){
                this.$set(this.form.iInvDCObject,`iInvDCMax${i+1}`,this.form.iInvDCObject[`iInvDCMax${i+1}`] || '')
                this.$set(this.form.iInvDCObject,`iInvSCMax${i+1}`,this.form.iInvDCObject[`iInvSCMax${i+1}`] || '')
                this.$set(this.form.iInvDCObject,`stringsParallelCount${i+1}`,this.form.iInvDCObject[`stringsParallelCount${i+1}`] || '')
                this.$set(this.form.iInvDCObject,`iInvPWMax${i+1}`,this.form.iInvDCObject[`iInvPWMax${i+1}`] || '')
            }
        },
        async systemTinverterSave(){
            let obj = JSON.parse(JSON.stringify(this.form))
            obj.checked = obj.checked ? 1:0
            obj.isTriPhase = obj.isTriPhase ? 1:0
            obj.isUtilizingReacPower = obj.isUtilizingReacPower ? 1:0
            obj = Object.assign({},obj,obj.iInvDCObject)
            obj.uploadFile = this.form.uploadFile
            obj.stringsNumber = this.form.inputCount
            console.log(obj,'obj');
            let res = await this.API.systemTinverterUpdate(obj)
            if(!res.success){
                if(res.code == 2){
                    this.$message({
                        message: this.$t('system.error'),
                        type: 'warning'
                    });
                }
                if(res.code == 1){
                    this.$message({
                        message: this.$t('project.inv.repeat'),
                        type: 'warning'
                    });
                }
                if(res.code == 0){
                    this.$message({
                        message: this.$t('operate.result.success'),
                        type: 'success'
                    });
                    // 跳转列表页面
                    await this.$router.push({path: '/adminInverter'});
                }
            }else{
                this.$message({
                    message: this.$t('operate.result.success'),
                    type: 'success'
                });
                // 跳转列表页面
                await this.$router.push({path: '/adminInverter'});
            }
        },
        save(formName){
            this.$refs[formName].validate((valid) => {
              if (valid) {
                  this.systemTinverterSave()
              } else {
                console.log('error submit!!');
                return false;
              }
            });
        },
        returnImgUrl(){
            let that = this
            if(this.form.uploadFile){
                var reader=new FileReader();
                reader.readAsDataURL(this.form.uploadFile);
                reader.onload=function (e) {
                     that.imgBaseUrl=e.target.result;
                }
            }
        }
    },
};
</script>

<style  lang="less" scoped>
    .save-main-box{
        display: flex;
        justify-content: space-evenly;
    }
</style>

